<%@ page import="javaweb_work01.login.Entity.User" %>
<%@ page import="javaweb_work01.main.Utils.PageContrl" %>
<%@ page import="javaweb_work01.main.Entity.Students" %>
<%@ page import="java.util.List" %> <%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
    <!--使用Bootstrap-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!--引入js-->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
    /*奇数行表格颜色*/
    .table-striped>tbody>tr:nth-child(odd)>td{
        background-color: #D9EDF7;
    }
    /*偶数行表格颜色*/
    .table-striped>tbody>tr:nth-child(even)>td{
        background-color: #FCF8E3;
    }
</style>
<body style="padding:10px">
<%--标题--%>
<h1>学员信息管理</h1>
<%--功能块--%>
<div>
    <%--返回主页的按钮,点击时调用main()函数--%>
        <a herf="#" id = "returnMain">
            <button class="btn btn-success">主页</button>
        </a>
    <%--新增学员的按钮，点击时跳转到新增学员页面--%>
    <a href="add.jsp">
        <button class="btn btn-primary">新增</button>
    </a>
    <%--查找学员的按钮--%>
    <a herf="#" id = "checkButton">
        <button class="btn btn-primary">查找</button>
    </a>
    <%--查找输入框，用了正则，只能输入数字--%>
    <input type="text" id="checkNum" placeholder="请输入需要查找的学号..." onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">
</div>


<div>
    <!--添加基本样式表格-->
    <table class="table table-striped">

        <!--标题行，即字段-->
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>邮箱</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
            <%
                //得到服务器共享的session
                //得到PageContrl对象，用于分页显示的控制
                PageContrl pageContrl = (PageContrl) session.getAttribute("pageContrl");
                //得到Students对象集合，用于显示，构建主页
                List<Students> showStudents = (List<Students>) session.getAttribute("showStudents");
                //利用for each循环遍历Students对象集合，并构建节点
                for(Students s:showStudents){
            %>
                <tr>
                    <td id="id"><%= s.getNum()%></td>
                    <td><%= s.getName()%></td>
                    <td><%= s.getSex()%></td>
                    <td><%= s.getDate()%></td>
                    <td><%= s.getEmail()%></td>
                    <td><%= s.getRemark()%></td>
                    <td><a href="#" class="set">修改</a></td>
                    <td><a href="#" class="delete">删除</a></td>
                </tr>
            <%  }%>

        </tbody>
    </table>
</div>

<!--分页组件-->
<div style="text-align:center">
    <ul class="pagination">
        <%--上一页按钮--%>
        <%--通过三目运算符改变按钮状态，是否可用--%>
        <li class= <%= pageContrl.backOK()?"":"disabled" %>>
            <a href="#" id="back"> BACK <span class="glyphicon glyphicon-chevron-left"></span></a>
        </li>
        <%--下一页按钮--%>
        <%--通过三目运算符改变按钮状态，是否可用--%>
        <li class= <%= pageContrl.nextOK()?"":"disabled" %>>
            <a href="#" id="next"> NEXT <span class="glyphicon glyphicon-chevron-right"></span></a>
        </li>
    </ul>
</div>


</body>
<script>
    //主页按钮功能,绑定点击事件
    jQuery(`#returnMain`).click(function () {
        //拼接url
        var url = "show?";
        //设置start属性值为0，即显示第一条学员数据
        url += "start=" + "0";
        //重新定位url
        location = url;
    });

    //发送上一页请求到ShowServlet
    jQuery(`#back`).click(function () {
        //调用PageContrl类的方法，判断是否有上一页
        if(<%= pageContrl.backOK()%>){
            //拼接url
            var url = "show?";
            //计算上一页的开头学员信息并设置为start的值
            url += "start=" + (<%= pageContrl.getStart() - pageContrl.getPageShow()%>);
            //重新定位url
            location = url;
        }
    });

    //发送下一页请求到ShowServlet
    jQuery(`#next`).click(function () {
        //调用PageContrl类的方法，判断是否有下页
        if(<%= pageContrl.nextOK()%>){
            //拼接url
            var url = "show?";
            //计算下一页的开头学员信息并设置为start的值
            url += "start=" + (<%= pageContrl.getStart() + pageContrl.getPageShow()%>);
            //重新定位url
            location = url;
        }
    });

    //发送删除请求
    jQuery(`.delete`).click(function () {
        //得到目标行的学员学号
        var delNum = jQuery(this).parents(`tr`).children().first().text();
        //拼接url
        var url = "delete?";
        url += "delNum="+delNum;
        //重新定位url
        location = url;
    });

    jQuery(`.set`).click(function () {
        //得到目标行的学员信息
        var num = jQuery(this).parents(`tr`).children().eq(0).text();
        var name = jQuery(this).parents(`tr`).children().eq(1).text();
        var sex = jQuery(this).parents(`tr`).children().eq(2).text();
        var date = jQuery(this).parents(`tr`).children().eq(3).text();
        var email = jQuery(this).parents(`tr`).children().eq(4).text();
        var remark = jQuery(this).parents(`tr`).children().eq(5).text();

        //拼接url
        var url = "set.jsp?";
        url += "setNum="+num+"&setName="+name+"&setSex="+sex+"&setDate="+date+"&setEmail="+email+"&setRemark="+remark;
        //重新定位url
        location = url;
    });

    jQuery(`#checkButton`).click(function () {
        //得到输入框的值
        var checkNum = jQuery(`#checkNum`).val();
        if(checkNum != ""){
            //拼接url
            var url = "check?";
            url += "checkNum=" + checkNum;
            //重新定位url
            location = url;
        }
    });


</script>
</html>
